import React, {Component} from 'react';
import axios from "axios";
import './filmpage.css'

var bus = {
    list: [],
    //订阅
    subscribe(callback) {
        console.log(callback)
        this.list.push(callback)
    },

    //发布
    publish(item) {
        //遍历所有list,将回调函数执行
        this.list.forEach(callback=>{
            callback && callback(item)
        })
    },
}

class App extends Component {
    constructor() {
        super();
        this.state = {
            list: [],
        }

        axios.get(`test.json`).then(res => {
            console.log(res.data.data.films)
            this.setState({
                list: res.data.data.films
            })
        })
    }

    render() {
        return (
            <div>
                {
                    this.state.list.map(item =>
                        <Filmitem key={item.filmId} {...item}></Filmitem>
                    )
                }

                <FilmDetail></FilmDetail>
            </div>
        );
    }
}

//受控组件
class Filmitem extends Component {
    render() {
        let {name, poster, grade,synopsis} = this.props
        return (
            <div className='filmitem' onClick={()=>{
                bus.publish(synopsis)
            }}>
                <img src={poster} alt={name}/>
                <h4>{name}</h4>
                <div>观众评分：{grade}</div>
            </div>
        )
    }
}

class FilmDetail extends Component {
    constructor() {
        super();
        this.state={
            info:'',
        }
        bus.subscribe((info)=>{
            this.setState({
                info:info
            })
        })
    }
    render() {
        return(
            <div className='filmiDetail'>
                {this.state.info}
            </div>
        )
    }
}


export default App;



